
<template>
  <button
   v-for="(_, tab) in tabs"
   :key="tab"
:class="['tab-button', { active: currentTab === tab }]"
   @click="currentTab = tab"
   >
   {{ tab }}
   </button>
   <hr />
   <KeepAlive >
   <component :is="tabs[currentTab]" class="tab"></component>
   </KeepAlive>
   </template>

  <script setup>
   import { ref } from 'vue'
  import game from './components/game-2.vue'
   import todoList from './components/todo-list.vue';

   // 设置默认激活的案例
   const currentTab = ref('game')

   // 把案例组件组织为tabs对象
   const tabs = {
   game,
  todoList
   }
   </script>
